<template>
  <div class="myinfo">
    <button @click="$router.push('/home')">跳转1</button>
    <div v-for="i in n" :key="i" :style="{ background: color() }">
      {{ i }}
    </div>
  </div>
</template>
<script setup>
const n = Math.floor(Math.random() * 200);
const duration = () => Math.random() * 2 + 0.5;
const delayTime = () => Math.floor(Math.random() * 10);
const color = () =>
  `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(
    Math.random() * 255
  )},${Math.ceil(Math.random() * 255)})`;
</script>
<style scoped>
.myinfo {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.myinfo > div {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  margin: 30px;
  animation: myanimation infinite both;
}
@keyframes myanimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>